import React from 'react';
import { FullscreenOutlined, CaretDownOutlined } from '@ant-design/icons';
import './IndexHeader.scss';
import { Dropdown } from 'antd';
import screenfull from 'screenfull';
const items = [
  {
    label: '个人资料修改',
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: '退出登录',
    key: '2',
  },
];
export default function IndexHeader() {
  // 全屏
  const onBlowUp = () => {
    screenfull.toggle();
  };
  // 下拉菜单选项
  const onClick = ({ key }) => {
    if (Number(key) === 1) {
      console.log('修改密码');
    } else {
      console.log('退出登录');
    }
  };
  return (
    <div className="hr-right">
      {/* 放大 */}
      <FullscreenOutlined
        onClick={onBlowUp}
        style={{ fontSize: 20 }}
        className="hr-icon"
      />
      {/* 用户名退出登录 */}
      <Dropdown menu={{items,onClick,}}
        trigger={['click']}
        placement="top"
        arrow={{ pointAtCenter: true }}
      >
        <span>
          <span className="admin">用户名</span>
          <CaretDownOutlined />
        </span>
      </Dropdown>
    </div>
  );
}
